<template>
  <a-row class="box">
    <a-col :span="6">
      <div class="box-ltr">
        <img src="~/static/q.jpg" alt srcset />
        <div>提现管理</div>
      </div>
    </a-col>
    <a-col :span="18">
      <div class="box-rtr">
        <a-col :span="24">
          <a-col :span="6">绑定支付宝</a-col>
          <a-col :span="6">{{zfb_names ? '已设置' : '未设置'}}</a-col>
          <a-col :span="12" class="box-rtr-btn">
            <a-button type="link" @click="() => {vTwo = true}">{{zfb_names ? '修改' : '设置'}}</a-button>
          </a-col>
        </a-col>
      </div>
    </a-col>
    <a-modal :title="'您正在为'+title+'修改支付宝账号'" v-model="vTwo" @ok="handleOkTwo" @cancel="closeTwo">
      <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
        <a-form-item label="原支付宝" v-if="zfb_names">{{zfb_names}}</a-form-item>
        <a-form-item label="新支付宝账号名称">
          <a-input
            v-decorator="['zfb_name', { rules: [{ required: true, message: '请输入支付宝账号名称' }] }]"
          />
        </a-form-item>
        <a-form-item label="新支付宝账号">
          <a-input v-decorator="['zhifubao', { rules: [{ required: true, message: '请输入付宝账号' }] }]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-row>
</template>

<script>
import { MY_INFO, BINDING_ZFB } from "./server";
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
      title: 1888888888,
      vOne: false,
      vTwo: false,
      zfb_names: ""
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    handleOkOne(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
        }
      });
    },
    closeOne() {},
    handleOkTwo(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          BINDING_ZFB({
            zfb_name: this.form.getFieldValue("zfb_name"),
            zhifubao: this.form.getFieldValue("zhifubao")
          }).then(res => {
            if (res.code != 200) {
              this.$message.error(res.msg);
              return;
            } else {
              this.$message.success(res.msg);
              this.getInfo();
              this.vTwo = false;
            }
          });
        }
      });
    },
    closeTwo() {},
    getInfo() {
      MY_INFO().then(res => {
        if (!res) return;
        this.title = res.data.phone;
        this.zfb_names = res.data.zfb_name;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  border: 1px solid #dadada;
  .box-ltr {
    height: 164px;
    padding-top: 50px;
    text-align: center;
    border-right: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    font-size: 16px;
    font-weight: bold;
    &:nth-child(2) {
      border-bottom: 0;
    }
    img {
      margin-bottom: 16px;
    }
  }
  .box-rtr {
    height: 164px;
    padding: 30px 0;
    border-bottom: 1px solid #dadada;
    &:nth-child(1) {
      line-height: 52px;
    }
    &:nth-child(2) {
      line-height: 82px;
      border-bottom: 0;
    }
    & > div {
      text-align: center;
    }
    .box-rtr-btn {
      text-align: right;
      padding-right: 24px;
    }
  }
  .md/deep/.ant-input-group-addon {
    color: #fff;
    background: #0084ff;
    cursor: pointer;
  }
}
</style>